<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax封装-回调函数</title>
</head>

<body>

    <div class="box"></div>
    <script src="./http.js"></script>
    <script>
         /*
            1.封装promise版本的ajax请求方法
            params:
                method:请求方式 （get|post|delete|put）
                url:请求地址
                data:请求参数 key=value&key2=value2
                        get:=>?key=value&key2=value2
                        post:=>key=value&key2=value2
            return:
                promise对象
        */


        // 封装ajax 参数  method  url  data   Promise
        // function request(method, url, data = null) {

        //     return  new Promise((resolve,reject)=>{
        //         // 1.创建ajax对象
        //         let xhr = new XMLHttpRequest()
        //         // 2.open()打开 如果是get要考虑是否地址栏传参，post没有
        //         url = method == 'get' && data != null ? url + '?' + data : url
        //         xhr.open(method, url, true)
        //         // 3.post有,get没有
        //         if (method == "post") xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
        //         // 4.send()发送请求 post有参数，get无参数
        //         xhr.send(method == "get" ? "" : data)
        //         // 5.监听
        //         xhr.onreadystatechange = function () {
        //             if (xhr.status == 200 && xhr.readyState == 4) {
        //                 // 请求结果回来后传递给回调函数
        //                 resolve(JSON.parse(xhr.response))
        //                 render(JSON.parse(xhr.response))
        //             }

        //         }

        //     })
        // }


        // 测试封装的方法：get  post
        request("get", "https://hmajax.itheima.net/api/news","")
            .then(res=>{
                console.log(res);
                
            })

        // post
        request("post", "https://hmajax.itheima.net/api/register","username=user0005&password=111111").then(res=>{
            console.log("注册的结果是："+res.message);

        })


        // 　　5. 更新界面

        function render(data) {
            document.querySelector(".box").innerHTML = data.message
        }


    </script>
</body>

</html>